import React, { Component } from 'react'

export default class Item extends Component {
  state = { mouse: false }
  // 移入移出
  handleMouse(flag){
    return () => this.setState({ mouse: flag })
  }

  // 勾选，
  handleCheck(id){
    return (event)=> this.props.updateTodo(id,event?.target.checked)
  }

  // 删除
  handleDel(id){
    return ()=> this.props.delTodo(id)
  }

  render() {
    const {id, title, done } = this.props
    const {mouse} = this.state
    return (
      <li style={{backgroundColor:mouse?'#ddd':'#fff'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
        {/* 移入移出事件 */}
        <label>
          {/* defaultChecked：只有初始化有效，更改不变 defaultChecked={done} */}
          <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
          <span>{title}</span>
        </label>
        <button className="btn btn-danger" onClick={this.handleDel(id)} style={{ display:mouse?'block': 'none' }}>删除</button>
      </li>
    )
  }
}
